<template>
    <div class="special-wrap">
        <div id="tag-card">
            <div class="right-content">
                <div class="name-pos">
                    {{ detail.name }}
                </div>
                <div class="tag-line">
                    <div class="tag">&#128293;人气值：{{ detail.hot }}</div>
                    <div class="tag">专业代码：{{ detail.code }}</div>
                    <div class="tag">修业年限：{{ detail.year }}</div>
                    <div class="tag">授予学位：{{ detail.degree }}</div>
                </div>
            </div>
        </div>
        <br>
        <div class="top-box">
            <div class="left-box common-card" style="width: 700px">

                <div class="boxa">
                    <div class="content-wrap">

                        <div class="content-title">
                            <h3>专业简介</h3>
                        </div>
                        <ul class="content-list">
                            <li>
                                <strong>是什么</strong><br />
                                {{ detail.is_what }}
                            </li>
                            <li>
                                <strong>学什么</strong><br />
                                {{ detail.learn_what }}
                            </li>
                            <li>
                                <strong>干什么</strong><br />
                                {{ detail.do_what }}
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="boxb">
                    <div class="content-wrap">
                        <div class="content-title">
                            <h3>专业详解</h3>
                        </div>
                        {{ detail.content }}
                    </div>
                </div>
                <div class="boxa">
                    <div class="content-wrap">
                        <div class="content-title">
                            <h3>选考学科建议</h3>
                        </div>
                        {{ detail.recommend_subject }}
                    </div>
                </div>


                <div class="boxb">
                    <div class="content-wrap">
                        <div class="content-title">
                            <h3>开设课程</h3>
                        </div>
                        {{ detail.subject }}
                    </div>
                </div>
                <div class="boxa">
                    <div class="content-wrap">
                        <div class="content-title">
                            <h3>考研方向</h3>
                        </div>
                        {{ detail.postgraduate }}
                    </div>
                </div>
                <!-- </div> -->
                <!-- <div v-show="showB"> -->

                <div class="boxb">
                    <div class="content-wrap">
                        <div class="content-title">
                            <h3>社会名人</h3>
                        </div>
                        {{ detail.people }}
                    </div>
                </div>
            </div>
            <div class="right-box">

                <div id="pic-intro">
                    <div id="intro" class="common-card">
                        <div class="round-wrap">
                            <div>
                                <div id="round_overall"></div>综合满意度
                            </div>
                            <div>
                                <div id="round_EducationConditions"></div>办学条件满意度
                            </div>
                            <div>
                                <div id="round_TeachingQuality"></div>教学质量满意度
                            </div>
                            <div>
                                <div id="round_JobRate"></div>就业满意度
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tables">
                    <div class="table-right">
                        <div v-show="detail.men_rate" class="boy-girl common-card">
                            <el-icon :size="50" color="#22B6ED">
                                <Male />
                            </el-icon>{{ detail.men_rate }}
                            <div v-show="detail.men_rate" id="scale-bar"></div>
                            {{ detail.female_rate }}
                            <el-icon :size="50" color="#FFB6C1">
                                <Female />
                            </el-icon>
                        </div>

                        <!-- </div> -->
                    </div>
                </div>

                <!-- </div> -->
                <!-- <div v-show="showC"> -->


                <div id="score-chart" class="common-card"></div>
                <div id="rate-regions" class="common-card"></div>

                <div id="jobs-chart" class="common-card"></div>

                <!-- </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts'
import request from "../utils/request.js";
export default {
    setup() {
        const route = useRoute();

        let specialId = route.query.id;
        // let detail = reactive({});
        const detail = ref({});
        //获取专业详细信息
        const getSpecialDetial = () => {
            request
                .post("http://192.168.80.190:8000/getSpecialDetail", { id: specialId })
                .then((res) => {
                    if (res.code == 200) {
                        detail.value = res.data;
                        updateChart(detail.value);
                    } else {
                        ElMessage.error({
                            message: "获取失败:" + res.message,
                        });
                    }
                })
                .catch((err) => {
                    ElMessage.error({
                        message: "服务器错误：" + err,
                    });
                });
        };
        const specialData = ref(null);


        // 使用刚指定的配置项和数据显示图表。
        // const main = ref();
        let roundOverall;
        let roundEducationConditions;
        let roundTeachingQuality;
        let roundJobRate;
        let SalaryChart;
        let JobsChart;
        let rateRegions;
        let scaleBar;
        // let w_lRate;

        const updateChart = (curVal) => {
            updateOverall_satisfaction(curVal);
            updateEducationConditions_satisfaction(curVal);
            updataTeachingQuality_satisfaction(curVal);
            updateJobRate_satisfaction(curVal);
            updateSalaryChart(curVal);
            updataJobsChart(curVal);
            updateRateRegions(curVal);
            updateScaleBar(curVal);
            // updateW_lRate(curVal);
        }

        onMounted(() => {
            initCharts();
            getSpecialDetial();
        });

        const initCharts = () => {
            init_Overall_satisfaction();
            init_EducationConditions_satisfaction();
            init_TeachingQuality_satisfaction();
            init_JobRate_satisfaction();
            initSalaryChart();
            initJobsChart();
            initRateRegions();
            initScaleBar();
            // initW_lRate();
        }

        const init_Overall_satisfaction = () => {
            roundOverall = echarts.init(document.getElementById('round_overall'));
            roundOverall.n = 4.2;
            roundOverall.setOption({
                title: {
                    text: roundOverall.n.toString(),
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        fontWeight: 'bold',
                        fontSize: 30
                    },
                },
                series: [
                    {
                        type: 'pie',
                        itemStyle: {
                            color: function (colors) {
                                var colorList = [
                                    '#fc8251',
                                    '#ffffff',
                                    '#91cd77',
                                    '#ef6567',
                                    '#f9c956',
                                    '#75bedc'
                                ];
                                return colorList[colors.dataIndex];
                            },
                        },
                        label: {
                            show: false,
                            position: 'center',
                        },
                        data: [
                            {
                                value: roundOverall.n,
                                name: 'A'
                            },
                            {
                                value: 5 - roundOverall.n,
                                name: 'B'
                            }
                        ],
                        radius: ['60%', '70%'],

                    }
                ]
            })
        }

        const updateOverall_satisfaction = (curVal) => {
            roundOverall.setOption({
                title: {
                    text: curVal.Overall_satisfaction,
                },
                series: [{
                    data: [
                        {
                            value: curVal.Overall_satisfaction,
                        },
                        {
                            value: 5 - curVal.Overall_satisfaction,
                        }
                    ],
                }]
            });
        }

        const init_EducationConditions_satisfaction = () => {
            roundEducationConditions = echarts.init(document.getElementById('round_EducationConditions'));
            roundEducationConditions.setOption({
                title: {
                    text: '4.5',
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        fontWeight: 'bold',
                        fontSize: 30
                    },
                },
                series: [
                    {
                        type: 'pie',
                        itemStyle: {
                            color: function (colors) {
                                var colorList = [
                                    '#91cd77',
                                    '#ffffff',
                                    '#ef6567',
                                    '#f9c956',
                                    '#75bedc'
                                ];
                                return colorList[colors.dataIndex];
                            },
                        },
                        label: {
                            show: false,
                            position: 'center',
                        },
                        data: [
                            {
                                value: 4.5,
                                name: 'A'
                            },
                            {
                                value: 0.5,
                                name: 'B'
                            }
                        ],
                        radius: ['60%', '70%'],

                    }
                ]
            })
        }

        const updateEducationConditions_satisfaction = (curVal) => {
            roundEducationConditions.setOption({
                title: {
                    text: curVal.EducationConditions_satisfaction,
                },
                series: [{
                    data: [
                        {
                            value: curVal.EducationConditions_satisfaction,
                        },
                        {
                            value: 5 - curVal.EducationConditions_satisfaction,
                        }
                    ],
                }]
            });
        }

        const init_TeachingQuality_satisfaction = () => {
            roundTeachingQuality = echarts.init(document.getElementById('round_TeachingQuality'));
            roundTeachingQuality.setOption({
                title: {
                    text: '4.7',
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        fontWeight: 'bold',
                        fontSize: 30
                    },
                },
                series: [
                    {
                        type: 'pie',
                        itemStyle: {
                            color: function (colors) {
                                var colorList = [
                                    '#ef6567',
                                    '#ffffff',
                                    '#91cd77',
                                    '#f9c956',
                                    '#75bedc'
                                ];
                                return colorList[colors.dataIndex];
                            },
                        },
                        label: {
                            show: false,
                            position: 'center',
                        },
                        data: [
                            {
                                value: 4.7,
                                name: 'A'
                            },
                            {
                                value: 0.3,
                                name: 'B'
                            }
                        ],
                        radius: ['60%', '70%'],

                    }
                ]
            });
        }

        const updataTeachingQuality_satisfaction = (curVal) => {
            roundTeachingQuality.setOption({
                title: {
                    text: curVal.TeachingQuality_satisfaction,
                },
                series: [{
                    data: [
                        {
                            value: curVal.TeachingQuality_satisfaction,
                        },
                        {
                            value: 5 - curVal.TeachingQuality_satisfaction,
                        }
                    ],
                }]
            });
        }

        const init_JobRate_satisfaction = () => {
            roundJobRate = echarts.init(document.getElementById('round_JobRate'));
            roundJobRate.setOption({
                title: {
                    text: '4.9',
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        fontWeight: 'bold',
                        fontSize: 30
                    },
                },
                series: [
                    {
                        type: 'pie',
                        itemStyle: {

                            color: function (colors) {
                                var colorList = [
                                    '#f9c956',
                                    '#ffffff',
                                    '#91cd77',
                                    '#ef6567',
                                    '#75bedc'
                                ];
                                return colorList[colors.dataIndex];
                            },
                        },
                        label: {
                            show: false,
                            position: 'center',
                        },
                        data: [
                            {
                                value: 4.9,
                                name: 'A'
                            },
                            {
                                value: 0.1,
                                name: 'B'
                            }
                        ],
                        radius: ['60%', '70%'],

                    }
                ]
            });
        }

        const updateJobRate_satisfaction = (curVal) => {
            roundJobRate.setOption({
                title: {
                    text: curVal.JobRate_satisfaction,
                },
                series: [{
                    data: [
                        {
                            value: curVal.JobRate_satisfaction,
                        },
                        {
                            value: 5 - curVal.JobRate_satisfaction,
                        }
                    ],
                }]
            });
        }

        const initSalaryChart = () => {
            SalaryChart = echarts.init(document.getElementById('score-chart'));
            SalaryChart.setOption({
                title: {
                    text: '薪酬',
                    left: 'center',
                    top: '4%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['本专业', '所有专业'],
                    top: '12%'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    top: '24%',
                    left: '5%',
                    right: '8%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['应届生', '2年经验', '5年经验', '10年经验']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: function (value) {
                            return value.min - 10;
                        },
                        max: function (value) {
                            return value.max + 10;
                        },
                        // intervel: 50,
                    }
                ],
                series: [
                    {
                        name: '本专业',
                        type: 'line',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [0, 0, 0, 0]
                    },
                    {
                        name: '所有专业',
                        type: 'line',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [0, 0, 0, 0]
                    }
                ]
            });
        }

        const updateSalaryChart = (curVal) => {
            SalaryChart.setOption({
                series: [
                    { data: curVal.salary_self },
                    { data: curVal.salary_average },
                ]
            });
        }

        const initJobsChart = () => {
            JobsChart = echarts.init(document.getElementById('jobs-chart'));
            JobsChart.setOption({
                //标题样式
                title: {
                    text: "就业岗位分布",
                    textStyle: {
                        color: 'black',
                    },
                    top: '4%',
                    left: 'center'
                },
                grid: {
                    top: '18%',
                    left: '12%',//原来是10%，修改为20%
                    right: '8%',
                    bottom: '8%'
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow',       // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        color: 'white',
                        fontSize: 10,
                    },
                    //y轴线设置显示
                    axisLine: {
                        show: true
                    },
                    axisPointer: {
                        show: true,
                        label: {
                            show: true,
                            formatter: '{value}%'
                        }
                    },
                    axisTick: {
                        show: true,
                        length: 10,
                        alignWithLabel: true,
                        lineStyle: {
                            color: 'white'
                        },
                        label: {
                            show: true,
                            formatter: '{value}%'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    inverse: true,
                    data: [1, 2, 3, 4, 5, 6],
                },
                series: [{
                    label: {
                        show: true,
                        // rotate: 90,
                        formatter: '{c}',
                        fontSize: 16,
                        color: 'white',
                        rich: {
                            name: {}
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [],
                    type: 'bar',
                    barMaxWidth: "60%",
                }]
            });
        }

        // const updataJobsChart = (curVal) => {
        //     JobsChart.setOption({
        //         series: [{
        //             data: [curVal.Rate1, curVal.Rate2, curVal.Rate3, curVal.Rate4, curVal.Rate5, curVal.Rate6]
        //         }]
        //     });
        // }

        const updataJobsChart = (curVal) => {
            const jobData = [
                curVal.Job1,
                curVal.Job2,
                curVal.Job3,
                curVal.Job4,
                curVal.Job5,
                curVal.Job6
            ];
            JobsChart.setOption({
                yAxis: {
                    type: 'category',
                    inverse: true,
                    data: jobData
                },
                series: [
                    {
                        data: [
                            curVal.Rate1,
                            curVal.Rate2,
                            curVal.Rate3,
                            curVal.Rate4,
                            curVal.Rate5,
                            curVal.Rate6
                        ]
                    }
                ]
            });
        }

        const initRateRegions = () => {
            rateRegions = echarts.init(document.getElementById('rate-regions'));
            rateRegions.setOption({
                title: {
                    text: "就业地区分布",
                    textStyle: {
                        color: 'black',
                    },
                    top: '4%',
                    left: 'center'
                },
                grid: {   // 直角坐标系内绘图网格
                    left: '20',  //grid 组件离容器侧的距离,
                    //left的值可以是80这样具体像素值，
                    //也可以是'80%'这样相对于容器高度的百分比
                    top: '50',
                    right: '20',
                    bottom: '0',
                    containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
                    // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
                    //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
                },
                xAxis: {  //直角坐标系grid中的x轴,
                    //一般情况下单个grid组件最多只能放上下两个x轴,
                    //多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
                    type: 'value',//坐标轴类型,分别有：
                    //'value'-数值轴；'category'-类目轴;
                    //'time'-时间轴;'log'-对数轴
                    splitLine: { show: false },//坐标轴在 grid 区域中的分隔线
                    axisLabel: { show: false },//坐标轴刻度标签
                    axisTick: { show: false },//坐标轴刻度
                    axisLine: { show: false },//坐标轴轴线
                },
                yAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: { show: false },
                    axisLabel: {
                        color: 'black',
                        fontSize: 15
                    },
                    data: ['其他地区', '北京市', '上海市']//类目数据，在类目轴（type: 'category'）中有效。
                    //如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
                },
                color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83'],
                series: [//系列列表。每个系列通过 type 决定自己的图表类型
                    {
                        name: '%',//系列名称
                        type: 'bar',//柱状、条形图
                        barWidth: 15,//柱条的宽度,默认自适应
                        data: [20, 40, 60],//系列中数据内容数组
                        label: { //图形上的文本标签
                            show: true,
                            position: 'right',//标签的位置
                            offset: [-40, -40],  //标签文字的偏移，此处表示向上偏移40
                            formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
                            color: 'black',//标签字体颜色
                            fontSize: 15  //标签字号
                        },
                        itemStyle: {//图形样式
                            //emphasis图形在高亮状态下的样式
                            borderRadius: 7,//柱条圆角半径,单位px.
                            //此处统一设置4个角的圆角大小;
                            //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                            color: function (params) {
                                var colorList = [
                                    new echarts.graphic.LinearGradient(
                                        0, 0, 1, 0,
                                        [{
                                            offset: 0,
                                            color: '#52E5E7'//柱图渐变色起点颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#130CB7'//柱图渐变色终点颜色
                                        }
                                        ]
                                    ),
                                    new echarts.graphic.LinearGradient(
                                        0, 0, 1, 0,
                                        [{
                                            offset: 0,
                                            color: '#FFE985'//柱图渐变色起点颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#FA742B'//柱图渐变色终点颜色
                                        }
                                        ]
                                    ),
                                    new echarts.graphic.LinearGradient(
                                        0, 0, 1, 0,
                                        [{
                                            offset: 0,
                                            color: '#81FBB8'//柱图渐变色起点颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#28C76F'//柱图渐变色终点颜色
                                        }
                                        ]
                                    )
                                ];

                                return colorList[params.dataIndex]
                            },
                        },
                        zlevel: 1//柱状图所有图形的 zlevel 值,
                        //zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
                    },
                    {
                        name: '进度条背景',
                        type: 'bar',
                        barGap: '-100%',//不同系列的柱间距离，为百分比。
                        // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
                        // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
                        //并且是对此坐标系中所有 'bar' 系列生效。
                        barWidth: 15,
                        data: [100, 100, 100],
                        color: '#e6e6e6',//柱条颜色
                        itemStyle: {
                            borderRadius: 7,
                        }
                    }
                ]
            });
        }

        const updateRateRegions = (curVal) => {
            rateRegions.setOption({
                series: [{
                    data: [curVal.rate1, curVal.rate2, curVal.rate3]
                }]
            });
        }

        const initScaleBar = () => {
            let dom = document.getElementById('scale-bar');
            scaleBar = echarts.init(dom);
            scaleBar.setOption({
                title: {
                    text: "男女比例",
                    textStyle: {
                        color: 'black',
                    },
                    top: '18%',
                    left: 'center'
                },
                grid: {   // 直角坐标系内绘图网格
                    left: '0',  //grid 组件离容器左侧的距离,
                    //left的值可以是80这样具体像素值，
                    //也可以是'80%'这样相对于容器高度的百分比
                    top: '15%',
                    right: '0',
                    bottom: '0',
                    containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
                    // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
                    //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
                },
                xAxis: {  //直角坐标系grid中的x轴,
                    //一般情况下单个grid组件最多只能放上下两个x轴,
                    //多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
                    type: 'value',//坐标轴类型,分别有：
                    //'value'-数值轴；'category'-类目轴;
                    //'time'-时间轴;'log'-对数轴
                    splitLine: { show: false },//坐标轴在 grid 区域中的分隔线
                    axisLabel: { show: false },//坐标轴刻度标签
                    axisTick: { show: false },//坐标轴刻度
                    axisLine: { show: false },//坐标轴轴线
                },
                yAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: { show: false },
                    axisLabel: {
                        color: 'black',
                        fontSize: 25
                    },
                    data: ['']//类目数据，在类目轴（type: 'category'）中有效。
                    //如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
                },
                series: [//系列列表。每个系列通过 type 决定自己的图表类型
                    {
                        name: '%',//系列名称
                        type: 'bar',//柱状、条形图
                        barWidth: 10,//柱条的宽度,默认自适应
                        data: [20],//系列中数据内容数组
                        // label: { //图形上的文本标签
                        //     show: true,
                        //     position: 'right',//标签的位置
                        //     offset: [0, -40],  //标签文字的偏移，此处表示向上偏移40
                        //     formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
                        //     color: 'black',//标签字体颜色
                        //     fontSize: 36  //标签字号
                        // },
                        itemStyle: {//图形样式

                            //emphasis图形在高亮状态下的样式
                            borderRadius: [10, 0, 0, 10],//柱条圆角半径,单位px.
                            //此处统一设置4个角的圆角大小;
                            //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
                            color: '#22B6ED',
                        },
                        zlevel: 1//柱状图所有图形的 zlevel 值,
                        //zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
                    },
                    {
                        name: '进度条背景',
                        type: 'bar',
                        barGap: '-100%',//不同系列的柱间距离，为百分比。
                        // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
                        // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
                        //并且是对此坐标系中所有 'bar' 系列生效。
                        barWidth: 10,
                        data: [100],
                        color: '#FFB6C1',//柱条颜色
                        itemStyle: {

                            borderRadius: 10,
                        }
                    }
                ]
            });
        }

        const updateScaleBar = (curVal) => {
            if (!scaleBar) return;
            if (curVal.men_rate == "") scaleBar.dispose();
            scaleBar.setOption({
                series: [{
                    data: [curVal.men_rate]
                }]
            });
        }

        return {
            // type,
            // year,
            // spQuery,
            specialData,
            getSpecialDetial,
            detail,
            // main

        }

    },
};
</script>


<style scoped>
.common-card {
    border-radius: 10px;
    box-shadow: 0 0 13px #e6e6e6;
    margin: 10px;
    padding: 10px;
}

.special-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width: 90%;
    height: 100%;
    background-color: #eaf4ee3a;

}

#tag-card {
    width: 100%;
    height: 270px;
    /* border: 20px solid #8abc8e; */
    /* background-color: #c5e1c8; */
    border-radius: 20px;
    background-image: linear-gradient(180deg, #7ec4f26e 0%, #eaf4ee3a 80%);
    display: flex;
    flex-direction: row;
}



.right-content {
    padding: 10px
}

.name-pos {
    font-size: xxx-large;
    color: #195670;
    margin: 20px;
    margin-left: 50px;
    margin-top: 50px;
    text-shadow: 0 0 5px #fff, 0 0 7px #fff, 0 0 6px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
}

.tag-line {
    display: flex;
    margin-top: 60px;
    margin-left: 10px;
    margin: 15px;
}

.tag {
    /* background-color: #4CAF50; */
    /* border-color: #3faff3; */
    border-radius: 40vh;
    color: #73a777;
    padding: 10px 15px;
    margin: 6px;
    margin-top: 20px;
    text-align: center;
    text-decoration: none;
    border: 2px solid #8ebe91;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    background-color: #FFFFFF;
    /* background-image: linear-gradient( 135deg, #3C8CE7 10%, #00EAFF 100%); */
}

#pic-intro {
    display: flex;
    
}

.vid-img {
    width: 460px;
    height: 259px;
    border-radius: 40px;
}

#intro {
    width: 500px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: #fff;
}

.round-wrap {
    height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #fff;
}

.round-wrap>* {
    /* width: 100px;
    height: 100px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
}

.round-wrap>*>* {
    width: 100px;
    height: 130px;

}

.content-wrap {
    /* margin-top: 20px; */
    text-align: left;
    padding-bottom: 20px;
    /* 将内容左对齐 */
}

.content-title {
    margin-left: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 25px;
    /* 增加标题字体大小 */
}

.content-title::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 20px;
    background-color: #73a777;
    margin-right: 10px;
}

.content-list {
    list-style-type: none;
    padding-left: 0px;

}

.boxa {
    background-color: #e2f7e82a;
    padding: 40px;
    padding-left: 60px;
    padding-right: 60px;
}

.boxb {
    background-color: #c0e4c927;
    padding: 40px;
    padding-left: 60px;
    padding-right: 60px;
    /* padding-left: 60px; */
    /* width: 80%; */
}

.content-list li {
    margin-bottom: 30px;
}

.content-list li:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #73a777;
    border-radius: 50%;
    margin-right: 20px;
}

/* .table-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
} */

#score-chart {
    width: 500px;
    height: 350px;
    background-color: #FFFFFF;
}

#jobs-chart {
    width: 500px;
    height: 400px;
    justify-content: center;
    margin-top: 20px;
    background-color: #FFFFFF;
}


#rate-regions {
    width: 500px;
    height: 350px;
    margin-top: 20px;
    background-color: #FFFFFF;
}

.boy-girl {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 500px;
    background-color: #FFFFFF;
}

#scale-bar {
    width: 320px;
    height: 150px;
    margin-top: 10px;
    background-color: #FFFFFF;
}


.tables {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

.table-right {
    display: flex;
    flex-direction: column;
    align-content: stretch;
}


.top-box{
    display: flex;
    flex-direction: row;
    align-items: flex-start;

}

</style>
